<template>
  <div class="dataTable" v-on="$listeners">
    <div class="btnGroup" v-if="isSearchTable">
      <div class="btn-left">
        <!--新建按钮需要权限控制-->
        <el-button
          size="small"
          type="primary"
          icon="el-icon-plus"
          v-if="add"
          @click="$emit('add')"
          >新建</el-button

        >
        <span class="more-btn">
          <slot name="moreBtn"></slot>
        </span>
      </div>
      <div class="btn-right">
        <span class="right-btn">
          <slot name="rightBtn"></slot>
        </span>
        <span v-if="hasSearchBtn">
           <el-button
          type="primary"
          @click="search"
         size="small"
          icon="el-icon-search"
          style="margin-right:10px"
          >搜索</el-button
        >
        <el-button   size="small" @click="$emit('clearData')">清空</el-button>
        </span>

      </div>
    </div>
    <div class="table">
      <el-table
        id="tableData"
        v-loading="loading"
        element-loading-text="数据加载中..."
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.6)"
        :data="dataList"
        :align="allAlign"
        @selection-change="handleSelectionChange"
        :border="border"
        :height="height"
        @row-dblclick="dblclick"
        ref="table"


      >
        <template v-for="(col,index) in colOptions">
           <slot v-if="col.slotName"  :name="col.slotName"></slot>
          <el-table-column
            v-else-if="col.type&&col.type == 'selection'"
            label-class-name="table-selection"
            :key="index"
            :type="col.type"
             width="55"
             fixed="left"
          >
          </el-table-column>
          <el-table-column
            v-else-if="col.type && col.type == 'index'"
            label-class-name="table-selection"
            :label="col.label"
            :key="index"
            :type="col.type"
            width="55"
            fixed="left"
          >
          </el-table-column>

          <el-table-column
            v-else-if="col.enums"
            :label="col.label"
            :width="col.width ? col.width : null"
            :prop="col.prop"
            :fixed="col.fixed ? col.fixed : ''"
            :key="index"
           show-overflow-tooltip
          >
            <template slot-scope="{ row }">
              <span>{{ col.enums[row[col.prop]] }}</span>
            </template>
          </el-table-column>
          <el-table-column
            :key="index"
            :label="col.label"
            v-else-if="col.jumpTo"
            :prop="col.prop"
           show-overflow-tooltip
              :fixed="col.fixed ? col.fixed : ''"
          >
            <template slot-scope="{ row }">
              <router-link
                :to="col.jumpTo(row)"
                :target="col.target || '_self'"
              >
                <span class="text_breviary"> {{ row[col.prop] }}</span>
              </router-link>
            </template>
          </el-table-column>
          <el-table-column
            v-else
            :label="col.label"
            :width="col.width ? col.width : null"
            :prop="col.prop"
            :fixed="col.fixed ? col.fixed : ''"
            :key="index"
            show-overflow-tooltip
          >
          </el-table-column>
        </template>
        <slot></slot>
        <slot name="edit"></slot>
      </el-table>
      <div></div>
    </div>
    <div class="c-dataTable__pagination" ref="pagination" v-if="isPaging">
      <el-pagination
        style="float:right"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        size="small"
        :current-page="searchParams.pageIndex"
        :page-size="searchParams.pageSize"
        :total="total"
        :page-sizes="[10, 20, 50,75, 100,200]"
        layout="total, sizes, prev, pager, next, jumper"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    // 控制新增按钮
    add: {
      type: Boolean,
      default: true
    },
    // 表头配置项
    colOptions: {
      type: Array
    },
    // 是否有border
    border: {
      type: Boolean,
      default: true
    },
    // 对齐方式
    allAlign: {
      type: String,
      default: 'left'
    },
    // 最大高度
    maxHeight: {
      type: Number,
      default: 500
    },
    // 请求数据的接口方法
    reqFun: {
      type: Function
    },
    // 请求参数
    param: {
      type: [Object]
    },
    // 是否分页
    isPaging: {
      type: Boolean,
      default: true
    },
    // 控制显示操作按钮，区分为普通table还是搜索table
    isSearchTable: {
      type: Boolean,
      default: false
    },
    // 是否有搜索按钮
    hasSearchBtn: {
      type: Boolean,
      default: true
    },
    // 不经过接口请求的数据
    defaultDataList: {
      type: Array
    }
  },
  data() {
    return {
      loading: false,
      total: 0,
      timer: '',
      searchParams: {
        pageIndex: 1,
        pageSize: 20,
        ...this.param
        // sorts: [
        //   {
        //     sortField: 'createDate',
        //     sortType: 'DESC'
        //   }
        // ]
      },
      dataList: this.defaultDataList ? this.defaultDataList : [],
      height: this.maxHeight
    }
  },
  created() {
    this.getDataList()
    console.log('colOptions', this.colOptions)
  },
  mounted() {
    this.getAutoHeight()
    const self = this
    window.onresize = function() {
      self.getAutoHeight()
    }
  },
  watch: {
    // 搜索使用的参数
    param: {
      handler(newValue) {
        // 此写法为重置参数
        this.searchParams = {
          pageIndex: 1,
          pageSize: 20
        }
        this.searchParams = { ...this.searchParams, ...newValue }
      },
      deep: true
    }
  },

  methods: {
    // 获取列表数据
    async getDataList() {
      if (this.isSearchTable) {
        this.loading = true
        const res = await this.reqFun(this.searchParams)
        try {
          if (res.result) {
            this.dataList = res.result.result
            this.total = res.result.recordCount
          }
          this.timer = setTimeout(this.isLoading, 800)
          this.timer = ''
        } catch (error) {
          this.loading = false
        }
      }
    },
    isLoading() {
      this.loading = false
    },
    // 勾选框
    handleSelectionChange(val) {
      this.$emit('selectItem', val)
    },
    // 跳转
    goTo(row, code) {
      this.$router.push({ path: `${row.link}/${code}` })
    },
    // pageSize切换
    handleSizeChange(val) {
      this.searchParams.pageSize = val
      this.getDataList()
    },
    // currentPage切换
    handleCurrentChange(val) {
      this.searchParams.pageIndex = val
      this.getDataList()
    },
    search() {
      this.searchParams.pageIndex = 1
      this.getDataList()
    },
    // 双击
    dblclick(row) {
      this.$emit('handerClick', row)
    },
    // 表格自适应
    getAutoHeight() {
      const el = document.querySelector('#tableData')
      if (el && el.parentNode) {
        const elParent = el.parentNode
        const pt = this.getStyle(elParent, 'paddingTop')
        const pb = this.getStyle(elParent, 'paddingBottom')
        this.$nextTick(() => {
          this.height = elParent.clientHeight - (pt + pb) + 'px'
          console.log('height', this.height)
        })
      }
    },
    getStyle(obj, attr) {
      // 兼容IE浏览器
      const result = obj.currentStyle
        ? obj.currentStyle[attr].replace('px', '')
        : document.defaultView
          .getComputedStyle(obj, null)[attr].replace('px', '')
      return Number(result)
    }
  }
}
</script>

<style lang="scss" scoped>
.dataTable {
  margin-top: 20px;
  .btnGroup {
    display: flex;
    justify-content: space-between;
    .btn-left {
      .more-btn {
        margin-left: 10px;
      }
    }
    .btn-right {
      .right-btn {
        margin-right: 10px;
      }
    }
  }
  .table {
    margin-top: 20px;
  }
  .c-dataTable__pagination {
    margin-top: 20px;
  }
  .text_breviary {
    color: #1890ff;
  }
}
.el-table {
  .el-table-column--selection.table-selection {
    display: block;
  }
}
.layout {
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
.el-main {
  overflow: hidden !important;
}

</style>
